<?php
/**
 * SocialEngine
 *
 * @category   Application_Core
 * @package    Translator
 * @copyright  Copyright 2008-2011 NewroSoftMods and TaurusSoft
 * @license    http://www.socialengine.net/license/
 * @author     Bezugliy Sergey
 */
?>

<script type="text/javascript">
function translateText ()
{
  var languageFrom = $('language_from').getSelected().get('value');
  var languageTo = $('language_to').getSelected().get('value');
  var text = $('text_from').get('value');
  var scr = document.createElement("script");
  // Test Key: 364C1B79E1323FE1AC09FE5D384CC8189A88EB24
  var key = '<?php echo $this->appid ?>';
  scr.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId="+key+"&from="+languageFrom+"&to="+languageTo+"&text="+text;
  document.getElementsByTagName("head")[0].appendChild(scr);
  window.mycallback = function(response) {
    $('text_to').set('value', response);
  }
}
</script>

<style type="text/css">
div#lang_bar {
    position: relative;
}
div#lang_bar > div {
    float: left;
    margin-bottom: 12px;
}
div#lang_bar > div > select {
    margin-top: 0;
}

div#translator_bar > div {
    border: 1px solid #7F9DB9;
    border-radius: 4px;
    width: 49.5%;
    margin: 0;
    overflow: hidden;
    box-shadow:  inset  0px 0px 1px  1px  #A5CAED, 0px 0px;
    -webkit-box-shadow:  inset  0px 0px 1px  1px  #A5CAED, 0px 0px;
    -moz-box-shadow:  inset  0px 0px 1px  1px  #A5CAED, 0px 0px;
    -khtml-box-shadow:  inset  0px 0px 1px  1px  #A5CAED, 0px 0px;
}
div#translator_bar > div:last-child {
    border: none;
}
div#translator_bar > div > textarea {
    background-color: transparent;
    margin: 1px;
    width: 99%;
    border: none;
    height: 400px;
}
</style>

<div id="lang_bar">
  <div>
    <label for="language_from">From:</label><br>
    <select id="language_from" name="language_from">
      <option value="ar">Arabic</option>
      <option value="cs">Czech</option>
      <option value="da">Danish</option>
      <option value="de">German</option>
      <option value="en" selected="selected">English</option>
      <option value="et">Estonian</option>
      <option value="fi">Finnish</option>
      <option value="fr">French</option>
      <option value="nl">Dutch</option>
      <option value="el">Greek</option>
      <option value="he">Hebrew</option>
      <option value="ht">Haitian Creole</option>
      <option value="hu">Hungarian</option>
      <option value="id">Indonesian</option>
      <option value="it">Italian</option>
      <option value="ja">Japanese</option>
      <option value="ko">Korean</option>
      <option value="lt">Lithuanian</option>
      <option value="lv">Latvian</option>
      <option value="no">Norwegian</option>
      <option value="pl">Polish</option>
      <option value="pt">Portuguese</option>
      <option value="ro">Romanian</option>
      <option value="es">Spanish</option>
      <option value="ru">Russian</option>
      <option value="sk">Slovak</option>
      <option value="sl">Slovene</option>
      <option value="sv">Swedish</option>
      <option value="th">Thai</option>
      <option value="tr">Turkish</option>
      <option value="uk">Ukrainian</option>
      <option value="vi">Vietnamese</option>
      <option value="zh-CHS">Simplified Chinese</option>
      <option value="zh-CHT">Traditional Chinese</option>
    </select>
  </div>
  <div style="margin-left: 7px;">
    <label for="language_to">To:</label><br>
    <select id="language_to" name="language_to">
      <option value="ar">Arabic</option>
      <option value="cs">Czech</option>
      <option value="da">Danish</option>
      <option value="de">German</option>
      <option value="en" selected="selected">English</option>
      <option value="et">Estonian</option>
      <option value="fi">Finnish</option>
      <option value="fr">French</option>
      <option value="nl">Dutch</option>
      <option value="el">Greek</option>
      <option value="he">Hebrew</option>
      <option value="ht">Haitian Creole</option>
      <option value="hu">Hungarian</option>
      <option value="id">Indonesian</option>
      <option value="it">Italian</option>
      <option value="ja">Japanese</option>
      <option value="ko">Korean</option>
      <option value="lt">Lithuanian</option>
      <option value="lv">Latvian</option>
      <option value="no">Norwegian</option>
      <option value="pl">Polish</option>
      <option value="pt">Portuguese</option>
      <option value="ro">Romanian</option>
      <option value="es">Spanish</option>
      <option value="ru">Russian</option>
      <option value="sk">Slovak</option>
      <option value="sl">Slovene</option>
      <option value="sv">Swedish</option>
      <option value="th">Thai</option>
      <option value="tr">Turkish</option>
      <option value="uk">Ukrainian</option>
      <option value="vi">Vietnamese</option>
      <option value="zh-CHS">Simplified Chinese</option>
      <option value="zh-CHT">Traditional Chinese</option>
    </select>
  </div>
  <div style="margin: 13px auto auto 7px; float: left;">
    <button id="translate" name="translate" onclick="translateText();">Translate</button>
  </div>
  <div style="clear: both;"></div>
</div>

<div id="translator_bar">
    <div style="float: left;">
        <textarea name="text_from" id="text_from"></textarea>
    </div>
    <div style="float: right;">
        <textarea name="text_to" id="text_to"></textarea>
    </div>
    <div style="clear: both;"></div>
</div>